<template>
    <div class="breadcrumb">
        <!-- <el-breadcrumb class="app-breadcrumb" separator=">"> -->
        <el-breadcrumb class="app-breadcrumb" separator="/" style="font-size: 17px;">
          <transition-group name="breadcrumbName">
         <template v-for="item in routes " >
          <!-- :key="item.name" -->
          <!-- 不写:key="item.name" transition-group就用不了-->
            <el-breadcrumb-item :to="{name:item.name}" :key="item.name">{{item.meta.title}}</el-breadcrumb-item>
         </template>
        </transition-group>
        </el-breadcrumb>
    </div>
  </template>
  
  <script>
  
  export default{
    name:'BreadCrumb',
    props:{
    routes:{
      type:Array,
      default() {
        return [];
      }
    }
    },
     computed:{
      // getRoute(){
      //   //首页  移除layout
      //   var routesMatched =this.$route.matched;
      //   if(this.$route.name == 'Home'){
      //     routesMatched.splice(0,1)
      //   console.log(routesMatched ,this.$route.matched ,'11')
     
      //   }
      //   // 非首页
      //   return  routesMatched
      // }
     }
  }
  </script>
  
<style lang="less" scoped>
.breadcrumbName-enter,.breadcrumbName-leave-to{  //开始进入  进入过渡
  //transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
  transform: translateX(80%);
  opacity: 0;
}
.breadcrumbName-enter-to,.breadcrumbName-leave{
  transform: translateX(0);
  opacity: 1;
}
.breadcrumbName-enter-active,.breadcrumbName-leave-active{
  //过渡
  transition: all .5s;
}
.breadcrumbName-leave-active{
  position: absolute;
}
</style>